<template>
  <div class="memberDetail" style="height: 100%">
    <div class="pageTitleSubTitle">
      <div class="title" @click="back"><a-icon type="left" style="margin-right: 10px"/>会员详情</div>
    </div>
    <div class="scrolls">
      <div class="memberMessage">
        <div v-for="(item,index) in info" :key="index" class="item">
          <span>{{item.name}}：{{item.val?item.val:'--'}}</span>
        </div>
      </div>
      <div class="memberTable">
        <div class="tableTitle">
          <div v-for="(item,index) in tabList" :key="index" :class="index+1 === tabIndex?'active':''" @click="tabChange(index+1)">{{item}}</div>
        </div>
      </div>
      <div class="tables">
        <div class="table" v-show="tabIndex === 1" v-for="(item,index) in members" :key="index">
          <p v-if="item.title">{{item.title}}</p>
          <a-table :columns="item.columns" :data-source="item.columnsData" :pagination="false" :rowKey="(record,index) => index">
            <span slot="order_record" slot-scope="order_record">{{order_record.order.order_short_no}}</span>
            <span slot="account" slot-scope="account">{{account.account == 1?'储值账户':account.account ==2?'年卡账户':account.account == 3?'疗程账户':'赠送账户'}}</span>
            <span slot="picture" slot-scope="picture,record"><img style="width: 61px;border-radius: 2px" :src="record.good.picture" alt=""></span>
            <span slot="name" slot-scope="name,record">{{record.good.name}}</span>
            <span slot="price" slot-scope="price,record">{{record.good.price}}</span>
            <span v-if="item.key !== 'order'" slot="status" slot-scope="status">{{status == 1?'生效中':'已失效'}}</span>
<!--            0下单 1已取消 2支付成功 4订单关闭 5退款-->
            <span v-if="item.key === 'order'" slot="status" slot-scope="status,record">{{record.order.status == 0?'下单':record.order.status==1?'已取消':record.order.status==2?'支付成功':record.order.status==4?'订单关闭':'退款'}}</span>
          </a-table>
          <Pagination :current="item.page" :total="item.total" @pageSize="e=>{pageSize(e,index)}" />
        </div>
        <div v-if="tabIndex === 2" class="table">
          <a-table :columns="orderColumns" :data-source="orderData" :pagination="false" :rowKey="(record,index) => index">
            <span slot="name" slot-scope="name,record">{{record.good.name}}</span>
            <span slot="picture" slot-scope="picture,record"><img style="width: 61px;border-radius: 2px" :src="record.good && record.good.picture?record.good.picture:''" alt=""></span>
            <span slot="status" slot-scope="status,record">{{status == 0?'下单':status==1?'已取消':status==2?'支付成功':status==4?'订单关闭':'退款'}}</span>
            <span slot="good_no" slot-scope="good_no,record" class="operation">
              <span>查看</span>
            </span>
          </a-table>
          <Pagination :current="orderPage" :total="orderTotal" @pageSize="orderPageSize" />
        </div>
        <div v-if="tabIndex === 3" class="table">
          <a-table :columns="goodColumns" :data-source="goodData" :pagination="false" :rowKey="(record,index) => index">
            <span slot="picture" slot-scope="picture,record"><img style="width: 61px;border-radius: 2px" :src="record.good && record.good.picture?record.good.picture:''" alt=""></span>
            <span slot="status" slot-scope="status,record">{{record.order.status == 0?'下单':record.order.status==1?'已取消':record.order.status==2?'支付成功':record.order.status==4?'订单关闭':'退款'}}</span>
            <span slot="good_no" slot-scope="good_no,record"  class="operation">
              <span>查看</span>
            </span>
          </a-table>
          <Pagination :current="goodPage" :total="goodTotal" @pageSize="goodPageSize" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Pagination from '@/common/pagination/index'
  import { member } from './index'
  export default {
    name:'memberDetail',
    components:{Pagination},
    data(){
      return {
        members:[],
        info:[
          {name:'会员姓名',key:'name',val:''},
          {name:'省市区',key:'address',val:''},
          {name:'推荐人',key:'referrer',val:''},
          {name:'来源渠道',key:'channel_source',val:''},
          {name:'手机号码',key:'phone',val:''},
          {name:'性别',key:'sex',val:''},
          {name:'开卡人',key:'open_card_staff',val:''},
          {name:'微信客服',key:'wechat_staff',val:''},
          {name:'会员生日',key:'birthday',val:''},
          {name:'办理时间',key:'created_at',val:''},
          {name:'开卡门店',key:'store',val:''},
          {name:'管家客服',key:'steward_staff',val:''},
        ],
        tabList:['卡项资料','订单记录','商品购买记录'],
        tabIndex:1,
        orderPage:1,
        orderTotal:0,
        orderColumns:[
          { title: '序号', dataIndex: 'id', key: 'id'},
          { title:'', dataIndex:'picture',key:'picture', scopedSlots: { customRender: 'picture' } },
          { title: '服务信息', dataIndex: 'name', key: 'name'},
          { title: '订单编号', dataIndex: 'order_short_no', key: 'order_short_no'},
          { title: '实付金额', dataIndex: 'payable_amount', key: 'payable_amount'},
          { title: '分类', dataIndex: 'goods_cate', key: 'goods_cate'},
          { title: '订单状态', dataIndex: 'status', key: 'status'},
          { title: '所属门店', dataIndex: 'store', key: 'store', scopedSlots:{ customRender: 'store' }},
          { title: '开单时间', dataIndex: 'created_at', key: 'created_at'},
          { title: '备注', dataIndex: 'remark', key: 'remark'},
          { title: '操作', dataIndex: 'good_no', key: 'good_no', scopedSlots:{ customRender: 'good_no' }},
        ],
        orderData:[],
        goodPage:1,
        goodTotal:0,
        goodColumns:[
          { title: '序号', dataIndex: 'id', key: 'id'},
          { title:'', dataIndex:'picture',key:'picture', scopedSlots: { customRender: 'picture' } },
          { title: '商品名称', dataIndex: 'name', key: 'name'},
          { title: '订单编号', dataIndex: 'order_short_no', key: 'order_short_no'},
          { title: '商品售价', dataIndex: 'price', key: 'price'},
          { title: '实付金额', dataIndex: 'payable_amount', key: 'payable_amount'},
          { title: '所属门店', dataIndex: 'store', key: 'store', scopedSlots:{ customRender: 'store' }},
          { title: '开单时间', dataIndex: 'created_at', key: 'created_at'},
          { title: '备注', dataIndex: 'remark', key: 'remark', scopedSlots:{ customRender: 'remark' }},
          { title: '操作', dataIndex: 'good_no', key: 'good_no', scopedSlots:{ customRender: 'good_no' }},
        ],
        goodData:[],
      }
    },
    created() {
      this.getList(1);
      let customer = this.$route.query.id;
      this.Api.customerDetail({},customer).then(res=>{
        if(res.code !== 200) return;
        let demo = res.data;
        this.info.forEach(item=>{
          if(typeof demo[item.key] === 'object'){
            item.val = demo[item.key].name
          }else{
            item.val = demo[item.key]
          }
          if(item.key === 'sex'){
            item.val = demo.sex == 1?'男':'女'
          }
          if(item.key === 'address'){
            item.val = demo.province.city_name + demo.city.city_name + demo.county.city_name + demo.address_details
          }
        })
      });
      this.members = member
    },
    methods:{
      tabChange(tab){
        this.tabIndex = tab;
        this.getList(tab)
      },
      goodPageSize(e){
        this.goodPage = e;
        this.getGood()
      },
      orderPageSize(e){
        this.orderPage = e;
        this.getOrder()
      },
      back(){
        history.back()
      },
      getList(tab){
        if(tab === 1){
          this.getAccountItems();
          this.getAccountPackage();
          this.getAccountCards();
          this.getAccountHistory()
        }
        if(tab === 2){
          this.getOrder()
        }
        if(tab === 3){
          this.getGood()
        }
      },
      getGood(){
        this.Api.accountGood({page:this.goodPage,size:10},this.$route.query.id).then(res=>{
          if(res.code !== 200) return;
          res.data.items.forEach(item=>{
            item.name = item.good && item.good.name?item.good.name:'--';
            item.order_short_no = item.order.order_short_no;
            item.status = item.order.status;
            item.remark = item.order.remark?item.order.remark:'--';
            item.price = item.good?item.good.price:'--'
          });
          this.goodData = res.data.items;
          this.goodTotal = res.data.total
        })
      },
      getOrder(){
        this.Api.accountOrder({page:this.orderPage,size:10},this.$route.query.id).then(res=>{
          if(res.code !== 200) return;
          res.data.items.forEach(item=>{
            item.name = item.good && item.good.name?item.good.name:'--';
            item.order_short_no = item.order.order_short_no;
            item.goods_cate = item.good && item.good.goods_cate?item.good.goods_cate.name +'/'+ item.good.goods_sub_cate.name:'--';
            item.status = item.order.status;
            item.remark = item.order.remark?item.order.remark:'--'
          })
          this.orderData = res.data.items;
          this.orderTotal = res.data.total
        })
      },
      pageSize(e,index){
        this.members[index].page = e;
        if(this.members[index].key === 'items') return this.getAccountItems(e);
        if(this.members[index].key === 'package') return this.getAccountPackage(e);
        if(this.members[index].key === 'card') return this.getAccountCards(e);
        if(this.members[index].key === 'account') return this.getAccountHistory(e);

      },
      getAccountItems(page){
        this.Api.accountItems({page:page?page:1,size:10},this.$route.query.id).then(res=>{
          if(res.code !== 200) return;
          member.forEach(item=>{
            if(item.key === 'items'){
              item.columnsData = res.data.items;
              item.total = res.data.total
            }
          });
          this.members = member;
        })
      },
      getAccountPackage(page){
        this.Api.accountPackage({page:page?page:1,size:10},this.$route.query.id).then(res=>{
          if(res.code !== 200) return;
          member.forEach(item=>{
            if(item.key === 'package'){
              item.columnsData = res.data.items;
              item.total = res.data.total
            }
          });
          this.members = member;
        })
      },
      getAccountCards(page){
        this.Api.accountCards({page:page?page:1,size:10},this.$route.query.id).then(res=>{
          if(res.code !== 200) return;
          member.forEach(item=>{
            if(item.key === 'card'){
              item.columnsData = res.data.items;
              item.total = res.data.total
            }
          });
          this.members = member;
        })
      },
      getAccountHistory(page){
        this.Api.accountHistory({page:page?page:1,size:10},this.$route.query.id).then(res=>{
          if(res.code !== 200) return;
          member.forEach(item=>{
            if(item.key === 'account'){
              item.columnsData = res.data.items;
              item.total = res.data.total
            }
          });
          this.members = member;
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .memberDetail{
    .pageTitleSubTitle{
      .title{
        cursor: pointer;
      }
    }
    .scrolls::-webkit-scrollbar {display:none}
    .scrolls{
      overflow-y: scroll;
      height: calc(100% - 64px);
      .memberMessage{
        margin: 8px 0;
        padding: 21px 24px 0;
        box-sizing: border-box;
        background: #ffffff;
        display: flex;
        flex-wrap: wrap;
        .item{
          width: 25%;
          margin-bottom: 21px;
          color: #7B7B7B;
        }
      }
      .tables{
        .table{
          margin: 8px 0;
          background: #ffffff;
          padding: 21px 24px;
          box-sizing: border-box;
          p{
            font-weight: 500;
            font-size: 16px;
            color: #333333;
          }
        }
      }
      .memberTable{
        padding: 24px;
        box-sizing: border-box;
        background: #ffffff;
        .tableTitle{
          display: flex;
          div{
            margin-right: 54px;
            font-size: 14px;
            color: #7B7B7B;
            cursor: pointer;
          }
          .active{
            position: relative;
            color: #006AFF;
          }
          .active::after{
            content: '';
            position: absolute;
            bottom: -4px;
            width: 60%;
            height: 3px;
            border-radius: 2px;
            background: #006AFF;
            left: 0;
            right: 0;
            margin: auto;
          }
        }
      }
    }
  }
</style>
